$(function () {
  form = layui.form
  layer = layui.layer

  initCateList()
  function initCateList() {
    axios({
      url: '/my/article/cates',
      method: 'get',
    }).then(res => {
      //成功回调
      console.log(res)
      if (res.data.status !== 0) {
        return layer.msg(res.data.message)
      }
      let arr = ['<option value="">请输入文章类别</option>']
      res.data.data.forEach(ele => {
        arr.push(`
      <option value="${ele.Id}">${ele.name}</option>
      `)
      })
      $('[name="cate_id"]').empty().html(arr.join(''))
      form.render()
    })
  }
  // 初始化富文本编辑器
  initEditor()
  // 1. 初始化图片裁剪器
  var $image = $('#image')
  // 2. 裁剪选项
  var options = {
    aspectRatio: 400 / 280,
    preview: '.img-preview'
  }
  // 3. 初始化裁剪区域
  $image.cropper(options)

  // 文章发布
  let state = ''
  $('#btn1').on('click',function(){
    state = '已发布'
  })
  $('#btn2').on('click',function(){
    state = '草稿'
  })
  $('#formPub').on('submit', function (e) {
    e.preventDefault()
    let fd = new FormData(this)
    fd.append('state', state)
    $image
  .cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
    width: 400,
    height: 280
  })
  .toBlob(function(blob) {       // 将 Canvas 画布上的内容，转化为文件对象
    // 得到文件对象后，进行后续的操作
    fd.append('cover_img', blob)
    axios({
      url:'/my/article/add',
      method:'post',
      data:fd
    }).then(res=>{
      console.log(res)
      if (res.data.status !== 0) {
        return layer.msg(res.data.message)
      }
      layer.msg('恭喜')
      setTimeout(function () {
        window.parent.document.querySelector('#art-list').click()
      },1000)
    })
  })
  })
  // 选择图片
  $('#chooseBtn').on('click',function(){
    $('#chooseInt').click()
  })
  $('#chooseInt').on('change',function(e){
    var file = e.target.files[0]
    var newImgURL = URL.createObjectURL(file)
    $image
    .cropper('destroy')      // 销毁旧的裁剪区域
    .attr('src', newImgURL)  // 重新设置图片路径
    .cropper(options)        // 重新初始化裁剪区域
  })
})